<template>
    <div class="pageCon">
        <el-button @click="newNotice" type="primary">新增公告</el-button>
        <el-dialog v-model="ifCreateShow" title="新增公告" width="30%">
            <el-form :model="noticeForm" label-width="120px">
                <el-form-item label="标题">
                    <el-input v-model="noticeForm.title" />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="noticeForm.content" type="textarea" />
                </el-form-item>
                <el-form-item label="是否展示">
                    <el-switch v-model="noticeForm.ifShow" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="ifCreateShow = false">取消</el-button>
                    <el-button type="primary" @click="createNotice">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-table :data="noticeList" style="width: 100%">
            <el-table-column label="标题">
                <template #default="{ row }">
                    <div v-if="!row.isEditing">
                        <span @click="editRow(row, 'title')">{{ row.title }}</span>
                    </div>
                    <div v-else>
                        <el-input v-model="row.title" @blur="saveRow(row, 'title')" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="内容">
                <template #default="{ row }">
                    <div v-if="!row.isEditing">
                        <span @click="editRow(row, 'content')">{{ row.content }}</span>
                    </div>
                    <div v-else>
                        <el-input v-model="row.content" type="textarea" @blur="saveRow(row, 'content')" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="ifShow" label="是否展示">
                <template #default="{ row }">
                    <el-switch v-model="row.ifShow" size="large" @change="changeNotice(row)" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
            :total="total" @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Api } from '@/api'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'

const ifCreateShow = ref(false)
const noticeList = ref([]) // 公告列表
const page = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示的条数
const total = ref(0) // 总条数

// 获取公告列表
const getNoticeList = async (page = 1, size = 10) => {
    try {
        const response = await Api.getNoticeList({ page, pageSize: size });
        noticeList.value = response.data.map(item => ({ ...item, isEditing: false }));
        total.value = response.total;
    } catch (error) {
        ElMessage.error('获取公告列表失败');
    }
}

// 处理页码变化
const handleCurrentChange = (newPage) => {
    page.value = newPage;
    getNoticeList(newPage, pageSize.value);
}

// 处理公告展示状态变化
const changeNotice = (row) => {
    Api.updateNotice({ id: row.id, ifShow: row.ifShow, content: row.content, title: row.title }).then(() => {
        ElMessage.success('更新成功');
    }).catch(() => {
        ElMessage.error('更新失败');
        // 恢复原状态
        row.ifShow = !row.ifShow;
    });
}

// 新增公告
const newNotice = () => {
    ifCreateShow.value = true
}

// 公告表单
const noticeForm = ref({
    title: '',
    content: '',
    ifShow: false
})

// 创建公告
const createNotice = async () => {
    try {
        const res = await Api.createNotice(noticeForm.value);
        if (res.status === 200) {
            ElMessage.success('新增成功');
            ifCreateShow.value = false
            getNoticeList()
        } else {
            ElMessage.error(res.msg);
        }
    } catch (error) {
        ElMessage.error('新增失败');
    }
}

// 编辑行
const editRow = (row, field) => {
    row.isEditing = true;
}

// 保存行
const saveRow = async (row, field) => {
    row.isEditing = false;
    try {
        const res = await Api.updateNotice({ id: row.id, ifShow: row.ifShow, content: row.content, title: row.title });
        if (res.status === 200) {
            ElMessage.success('更新成功');
        } else {
            ElMessage.error(res.msg);
        }
    } catch (error) {
        ElMessage.error('更新失败');
    }
}

onMounted(() => {
    getNoticeList();
})
</script>